<template>
  <div class="cart">
    <!-- 导航 -->
    <NavBar class="cart-nav"><template #center>购物车({{ length }})</template>></NavBar>
    <!-- 商品列表 -->
    <CartList></CartList>
    <!-- 底部汇总 -->
    <CartBottomBar @cartBuy="cartBuy"></CartBottomBar>
    <Toast :message="message" :isShow="isShow"></Toast>
  </div>
</template>

<script>
import NavBar from "../../components/common/navbar/NavBar";

import { mapGetters } from "vuex";
import CartList from "./childComps/CartList.vue";
import CartBottomBar from "./childComps/CartBottomBar.vue";
import Toast from "../../components/common/toast/Toast";

export default {
  name: "Cart",
  components: {
    NavBar,
    CartList,
    CartBottomBar,
    Toast,
  },
  data() {
    return {
      isShow: false,
      message: "请选择商品",
    };
  },
  computed: {
    ...mapGetters({length: "cartLength", list: "cartList"}),
  },
  methods: {
    cartBuy() {
      if (!this.cartList) {
        this.isShow = true;
        setTimeout(() => {
          this.isShow = false;
        }, 1500);
      }
    },
  },
};
</script>

<style>
.cart-nav {
  background-color: var(--color-tint);
  color: #fff;
  justify-content: center;
  /* 为了在使用原生滚动时，导航栏不随着内容滚动 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
}
</style>